<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="刘清政">
  <meta name="keyword" content="hexo-theme">
  
    <link rel="shortcut icon" href="/css/images/logo.png">
  
  <title>
    
      python/前端/18-JQuery动画效果 | Justin-刘清政的博客
    
  </title>
  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow.min.css" rel="stylesheet">
  
<link rel="stylesheet" href="/css/style.css">

  
    
<link rel="stylesheet" href="/css/plugins/gitment.css">

  
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
  
    
<script src="/js/qrious.js"></script>

  
  
    
<script src="/js/gitment.js"></script>

  
  

  
<meta name="generator" content="Hexo 4.2.0"></head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>

  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>Justin-刘清政的博客</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/" class="item-link">主页</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">标签</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">归档</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">关于我</a>
          
        </li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/" class="menu-link">主页</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">标签</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">归档</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">关于我</a>
            
          </li>
        
      </ul>
    </div>
  </div>
</header>

    <div id="article-banner">
  <h2>python/前端/18-JQuery动画效果</h2>



  <p class="post-date">2020-11-03</p>
    <!-- 不蒜子统计 -->
    <span id="busuanzi_container_page_pv" style='display:none' class="">
        <i class="icon-smile icon"></i> 阅读数：<span id="busuanzi_value_page_pv"></span>次
    </span>
  <div class="arrow-down">
    <a href="javascript:;"></a>
  </div>
</div>
<main class="app-body flex-box">
  <!-- Article START -->
  <article class="post-article">
    <section class="markdown-content"><h2 id="1-基本效果"><a href="#1-基本效果" class="headerlink" title="1. 基本效果"></a>1. 基本效果</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">show([s,[e],[fn]])		显示隐藏的匹配元素</span><br><span class="line">hide([s,[e],[fn]])		隐藏显示的元素</span><br><span class="line">toggle([s],[e],[fn])	如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的</span><br></pre></td></tr></table></figure>

<p><strong>参数详解</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">speed	: 三种预定速度之一的字符串(&quot;slow&quot;,&quot;normal&quot;, or &quot;fast&quot;)或表示动画时长的毫秒数值(如：1000)</span><br><span class="line">easing	: (Optional) 用来指定切换效果，默认是&quot;swing&quot;，可用参数&quot;linear&quot;</span><br><span class="line">fn		: 在动画完成时执行的函数，每个元素执行一次。</span><br></pre></td></tr></table></figure>

<h2 id="2-滑动效果"><a href="#2-滑动效果" class="headerlink" title="2. 滑动效果"></a>2. 滑动效果</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">slideDown([s],[e],[fn])		通过高度变化（向下增大）来动态地显示所有匹配的元素</span><br><span class="line">slideUp([s,[e],[fn]])		通过高度变化（向上减小）来动态地隐藏所有匹配的元素</span><br><span class="line">slideToggle([s],[e],[fn])	通过高度变化来切换所有匹配元素的可见性</span><br></pre></td></tr></table></figure>

<p><strong>参数详解</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">speed	: 三种预定速度之一的字符串(&quot;slow&quot;,&quot;normal&quot;, or &quot;fast&quot;)或表示动画时长的毫秒数值(如：1000)</span><br><span class="line">easing	: (Optional) 用来指定切换效果，默认是&quot;swing&quot;，可用参数&quot;linear&quot;</span><br><span class="line">fn		: 在动画完成时执行的函数，每个元素执行一次。</span><br></pre></td></tr></table></figure>

<h2 id="3-淡入淡出效果"><a href="#3-淡入淡出效果" class="headerlink" title="3 淡入淡出效果"></a>3 淡入淡出效果</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">fadeIn([s],[e],[fn])		通过不透明度的变化来实现所有匹配元素的淡入效果</span><br><span class="line">fadeOut([s],[e],[fn])		通过不透明度的变化来实现所有匹配元素的淡出效果</span><br><span class="line">fadeToggle([s,[e],[fn]])	通过不透明度的变化来开关所有匹配元素的淡入和淡出效果</span><br><span class="line">fadeTo([[s],o,[e],[fn]])	把所有匹配元素的不透明度以渐进方式调整到指定的不透明度</span><br></pre></td></tr></table></figure>

<p><strong>参数详解</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">speed	: 三种预定速度之一的字符串(&quot;slow&quot;,&quot;normal&quot;, or &quot;fast&quot;)或表示动画时长的毫秒数值(如：1000)</span><br><span class="line">easing	: (Optional) 用来指定切换效果，默认是&quot;swing&quot;，可用参数&quot;linear&quot;</span><br><span class="line">fn		: 在动画完成时执行的函数，每个元素执行一次。</span><br><span class="line"></span><br><span class="line">opacity	: (用户fadeTo)一个0至1之间表示透明度的数字。</span><br></pre></td></tr></table></figure>

<h2 id="4-自定义动画"><a href="#4-自定义动画" class="headerlink" title="4 自定义动画"></a>4 自定义动画</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">animate(p,[s],[e],[fn])</span><br></pre></td></tr></table></figure>

<p><strong>参数详解</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">params	: 一组包含作为动画属性和终值的样式属性和及其值的集合</span><br><span class="line">speed	: 三种预定速度之一的字符串(&quot;slow&quot;,&quot;normal&quot;, or &quot;fast&quot;)或表示动画时长的毫秒数值(如：1000)</span><br><span class="line">easing	: 要使用的擦除效果的名称(需要插件支持).默认jQuery提供&quot;linear&quot; 和 &quot;swing&quot;.</span><br><span class="line">fn		: 在动画完成时执行的函数，每个元素执行一次。</span><br></pre></td></tr></table></figure>

<h2 id="5-动画控制"><a href="#5-动画控制" class="headerlink" title="5 动画控制"></a>5 动画控制</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">stop([c],[j])		停止所有在指定元素上正在运行的动画</span><br><span class="line">delay(d,[q])		设置一个延时来推迟执行队列中之后的项目</span><br><span class="line">finish([queue])		停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画</span><br></pre></td></tr></table></figure>

<h2 id="6-设置"><a href="#6-设置" class="headerlink" title="6 设置"></a>6 设置</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//关闭页面上所有的动画</span></span><br><span class="line">jQuery.fx.off = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure>

<h2 id="7-事件"><a href="#7-事件" class="headerlink" title="7 事件"></a>7 事件</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 第一种</span></span><br><span class="line">    $(<span class="string">'#d1'</span>).click(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            alert(<span class="string">'别说话 吻我'</span>)</span><br><span class="line">    &#125;);</span><br><span class="line">  </span><br><span class="line"><span class="comment">// 第二种(功能更加强大 还支持事件委托)</span></span><br><span class="line">    $(<span class="string">'#d2'</span>).on(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            alert(<span class="string">'借我钱买草莓 后面还你'</span>)</span><br><span class="line">    &#125;)</span><br></pre></td></tr></table></figure>



<h3 id="7-1-常用事件"><a href="#7-1-常用事件" class="headerlink" title="7-1 常用事件"></a>7-1 常用事件</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">click(function()&#123;...&#125;)</span><br><span class="line">hover(function()&#123;...&#125;)</span><br><span class="line">blur(function()&#123;...&#125;)</span><br><span class="line">focus(function()&#123;...&#125;)</span><br><span class="line">change(function()&#123;...&#125;)</span><br><span class="line">keyup(function()&#123;...&#125;)</span><br></pre></td></tr></table></figure>



<p>keydown和keyup事件组合示例：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;zh-CN&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta http-equiv&#x3D;&quot;content-Type&quot; charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta http-equiv&#x3D;&quot;x-ua-compatible&quot; content&#x3D;&quot;IE&#x3D;edge&quot;&gt;</span><br><span class="line">    &lt;title&gt;Title&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&lt;table border&#x3D;&quot;1&quot;&gt;</span><br><span class="line">  &lt;thead&gt;</span><br><span class="line">  &lt;tr&gt;</span><br><span class="line">    &lt;th&gt;#&lt;&#x2F;th&gt;</span><br><span class="line">    &lt;th&gt;姓名&lt;&#x2F;th&gt;</span><br><span class="line">    &lt;th&gt;操作&lt;&#x2F;th&gt;</span><br><span class="line">  &lt;&#x2F;tr&gt;</span><br><span class="line">  &lt;&#x2F;thead&gt;</span><br><span class="line">  &lt;tbody&gt;</span><br><span class="line">  &lt;tr&gt;</span><br><span class="line">    &lt;td&gt;&lt;input type&#x3D;&quot;checkbox&quot;&gt;&lt;&#x2F;td&gt;</span><br><span class="line">    &lt;td&gt;Egon&lt;&#x2F;td&gt;</span><br><span class="line">    &lt;td&gt;</span><br><span class="line">      &lt;select&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;1&quot;&gt;上线&lt;&#x2F;option&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;2&quot;&gt;下线&lt;&#x2F;option&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;3&quot;&gt;停职&lt;&#x2F;option&gt;</span><br><span class="line">      &lt;&#x2F;select&gt;</span><br><span class="line">    &lt;&#x2F;td&gt;</span><br><span class="line">  &lt;&#x2F;tr&gt;</span><br><span class="line">  &lt;tr&gt;</span><br><span class="line">    &lt;td&gt;&lt;input type&#x3D;&quot;checkbox&quot;&gt;&lt;&#x2F;td&gt;</span><br><span class="line">    &lt;td&gt;Alex&lt;&#x2F;td&gt;</span><br><span class="line">    &lt;td&gt;</span><br><span class="line">      &lt;select&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;1&quot;&gt;上线&lt;&#x2F;option&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;2&quot;&gt;下线&lt;&#x2F;option&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;3&quot;&gt;停职&lt;&#x2F;option&gt;</span><br><span class="line">      &lt;&#x2F;select&gt;</span><br><span class="line">    &lt;&#x2F;td&gt;</span><br><span class="line">  &lt;&#x2F;tr&gt;</span><br><span class="line">  &lt;tr&gt;</span><br><span class="line">    &lt;td&gt;&lt;input type&#x3D;&quot;checkbox&quot;&gt;&lt;&#x2F;td&gt;</span><br><span class="line">    &lt;td&gt;Yuan&lt;&#x2F;td&gt;</span><br><span class="line">    &lt;td&gt;</span><br><span class="line">      &lt;select&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;1&quot;&gt;上线&lt;&#x2F;option&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;2&quot;&gt;下线&lt;&#x2F;option&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;3&quot;&gt;停职&lt;&#x2F;option&gt;</span><br><span class="line">      &lt;&#x2F;select&gt;</span><br><span class="line">    &lt;&#x2F;td&gt;</span><br><span class="line">  &lt;&#x2F;tr&gt;</span><br><span class="line">  &lt;tr&gt;</span><br><span class="line">    &lt;td&gt;&lt;input type&#x3D;&quot;checkbox&quot;&gt;&lt;&#x2F;td&gt;</span><br><span class="line">    &lt;td&gt;EvaJ&lt;&#x2F;td&gt;</span><br><span class="line">    &lt;td&gt;</span><br><span class="line">      &lt;select&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;1&quot;&gt;上线&lt;&#x2F;option&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;2&quot;&gt;下线&lt;&#x2F;option&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;3&quot;&gt;停职&lt;&#x2F;option&gt;</span><br><span class="line">      &lt;&#x2F;select&gt;</span><br><span class="line">    &lt;&#x2F;td&gt;</span><br><span class="line">  &lt;&#x2F;tr&gt;</span><br><span class="line">  &lt;tr&gt;</span><br><span class="line">    &lt;td&gt;&lt;input type&#x3D;&quot;checkbox&quot;&gt;&lt;&#x2F;td&gt;</span><br><span class="line">    &lt;td&gt;Gold&lt;&#x2F;td&gt;</span><br><span class="line">    &lt;td&gt;</span><br><span class="line">      &lt;select&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;1&quot;&gt;上线&lt;&#x2F;option&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;2&quot;&gt;下线&lt;&#x2F;option&gt;</span><br><span class="line">        &lt;option value&#x3D;&quot;3&quot;&gt;停职&lt;&#x2F;option&gt;</span><br><span class="line">      &lt;&#x2F;select&gt;</span><br><span class="line">    &lt;&#x2F;td&gt;</span><br><span class="line">  &lt;&#x2F;tr&gt;</span><br><span class="line">  &lt;&#x2F;tbody&gt;</span><br><span class="line">&lt;&#x2F;table&gt;</span><br><span class="line"></span><br><span class="line">&lt;input type&#x3D;&quot;button&quot; id&#x3D;&quot;b1&quot; value&#x3D;&quot;全选&quot;&gt;</span><br><span class="line">&lt;input type&#x3D;&quot;button&quot; id&#x3D;&quot;b2&quot; value&#x3D;&quot;取消&quot;&gt;</span><br><span class="line">&lt;input type&#x3D;&quot;button&quot; id&#x3D;&quot;b3&quot; value&#x3D;&quot;反选&quot;&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&lt;script src&#x3D;&quot;jquery-3.3.1.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"></span><br><span class="line">    var flag &#x3D; false;</span><br><span class="line">    &#x2F;&#x2F; shift按键被按下的时候</span><br><span class="line">    $(window).keydown(function (event) &#123;</span><br><span class="line">        console.log(event.keyCode);</span><br><span class="line">        if (event.keyCode &#x3D;&#x3D;&#x3D; 16)&#123;</span><br><span class="line">            flag &#x3D; true;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    &#x2F;&#x2F; shift按键被抬起的时候</span><br><span class="line">    $(window).keyup(function (event) &#123;</span><br><span class="line">        console.log(event.keyCode);</span><br><span class="line">        if (event.keyCode &#x3D;&#x3D;&#x3D; 16)&#123;</span><br><span class="line">            flag &#x3D; false;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    &#x2F;&#x2F; select标签的值发生变化的时候</span><br><span class="line">    $(&quot;select&quot;).change(function (event) &#123;</span><br><span class="line">        &#x2F;&#x2F; 如果shift按键被按下，就进入批量编辑模式</span><br><span class="line">        &#x2F;&#x2F; shift按键对应的code是16</span><br><span class="line">        &#x2F;&#x2F; 判断当前select这一行是否被选中</span><br><span class="line">        console.log($(this).parent().siblings().first().find(&quot;:checkbox&quot;));</span><br><span class="line">        var isChecked &#x3D; $(this).parent().siblings().first().find(&quot;:checkbox&quot;).prop(&quot;checked&quot;);</span><br><span class="line">        console.log(isChecked);</span><br><span class="line">        if (flag &amp;&amp; isChecked) &#123;</span><br><span class="line">            &#x2F;&#x2F; 进入批量编辑模式</span><br><span class="line">            &#x2F;&#x2F; 1. 取到当前select选中的值</span><br><span class="line">            var value &#x3D; $(this).val();</span><br><span class="line">            &#x2F;&#x2F; 2. 给其他被选中行的select设置成和我一样的值</span><br><span class="line">            &#x2F;&#x2F; 2.1 找到那些被选中行的select</span><br><span class="line">            var $select &#x3D; $(&quot;input:checked&quot;).parent().parent().find(&quot;select&quot;)</span><br><span class="line">            &#x2F;&#x2F; 2.2 给选中的select赋值</span><br><span class="line">            $select.val(value);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<p><a href="javascript:void(0);"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></p>
<p>hover事件示例：</p>
<p><a href="javascript:void(0);"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;Title&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;p&gt;苍茫的天涯是我的哎，绵绵的青山脚下一片海！&lt;&#x2F;p&gt;</span><br><span class="line"></span><br><span class="line">&lt;script src&#x3D;&quot;jQuery-3.3.1.js&quot;&gt;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    $(&#39;p&#39;).hover(</span><br><span class="line">        function () &#123;</span><br><span class="line">            alert(&#39;来啦，老弟&#39;)</span><br><span class="line">        &#125;,</span><br><span class="line">        function () &#123;</span><br><span class="line">            alert(&#39;慢走哦～&#39;)</span><br><span class="line">        &#125;</span><br><span class="line">    )</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>



<p>实时监听input输入值变化示例：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">  &lt;meta http-equiv&#x3D;&quot;x-ua-compatible&quot; content&#x3D;&quot;IE&#x3D;edge&quot;&gt;</span><br><span class="line">  &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1&quot;&gt;</span><br><span class="line">  &lt;title&gt;实时监听input输入值变化&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;input type&#x3D;&quot;text&quot; id&#x3D;&quot;i1&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;script src&#x3D;&quot;jquery-3.2.1.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  &#x2F;*</span><br><span class="line">  * oninput是HTML5的标准事件</span><br><span class="line">  * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，</span><br><span class="line">  * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发</span><br><span class="line">  * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代</span><br><span class="line">  * 使用jQuery库的话直接使用on同时绑定这两个事件即可。</span><br><span class="line">  * *&#x2F;</span><br><span class="line">  $(&quot;#i1&quot;).on(&quot;input propertychange&quot;, function () &#123;</span><br><span class="line">    alert($(this).val());</span><br><span class="line">  &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>



<h3 id="7-2-事件绑定"><a href="#7-2-事件绑定" class="headerlink" title="7-2 事件绑定"></a>7-2 事件绑定</h3><ol>
<li><code>.on( events [, selector ],function(){})</code></li>
</ol>
<ul>
<li>events： 事件</li>
<li>selector: 选择器（可选的）</li>
<li>function: 事件处理函数</li>
</ul>
<h3 id="7-3-移除事件"><a href="#7-3-移除事件" class="headerlink" title="7-3 移除事件"></a>7-3 移除事件</h3><ol>
<li><code>.off( events [, selector ][,function(){}])</code></li>
</ol>
<p><code>off()</code> 方法移除用 <code>.on()</code>绑定的事件处理程序。</p>
<ul>
<li>events： 事件</li>
<li>selector: 选择器（可选的）</li>
<li>function: 事件处理函数</li>
</ul>
<h3 id="7-4-阻止后续事件执行"><a href="#7-4-阻止后续事件执行" class="headerlink" title="7-4 阻止后续事件执行"></a>7-4 阻止后续事件执行</h3><ol>
<li><code>return false; // 常见阻止表单提交等</code></li>
<li>e.preventDefault();</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;阻止默认事件&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;form action&#x3D;&quot;&quot;&gt;</span><br><span class="line">    &lt;button id&#x3D;&quot;b1&quot;&gt;点我&lt;&#x2F;button&gt;</span><br><span class="line">&lt;&#x2F;form&gt;</span><br><span class="line"></span><br><span class="line">&lt;script src&#x3D;&quot;jquery-3.3.1.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    $(&quot;#b1&quot;).click(function (e) &#123;</span><br><span class="line">        alert(123);</span><br><span class="line">        &#x2F;&#x2F;return false;</span><br><span class="line">        e.preventDefault();</span><br><span class="line">    &#125;);</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>



<p>注意：</p>
<p>像click、keydown等DOM中定义的事件，我们都可以使用<code>.on()</code>方法来绑定事件，但是<code>hover</code>这种jQuery中定义的事件就不能用<code>.on()</code>方法来绑定了。</p>
<p>想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$(&#39;ul&#39;).on(&#39;mouseenter&#39;, &#39;li&#39;, function() &#123;&#x2F;&#x2F;绑定鼠标进入事件</span><br><span class="line">    $(this).addClass(&#39;hover&#39;);</span><br><span class="line">&#125;);</span><br><span class="line">$(&#39;ul&#39;).on(&#39;mouseleave&#39;, &#39;li&#39;, function() &#123;&#x2F;&#x2F;绑定鼠标划出事件</span><br><span class="line">    $(this).removeClass(&#39;hover&#39;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>



<h3 id="7-8-阻止事件冒泡"><a href="#7-8-阻止事件冒泡" class="headerlink" title="7-8 阻止事件冒泡"></a>7-8 阻止事件冒泡</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;阻止事件冒泡&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;p&gt;</span><br><span class="line">        &lt;span&gt;点我&lt;&#x2F;span&gt;</span><br><span class="line">    &lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;div&gt;</span><br><span class="line">&lt;script src&#x3D;&quot;jquery-3.3.1.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    $(&quot;span&quot;).click(function (e) &#123;</span><br><span class="line">        alert(&quot;span&quot;);</span><br><span class="line">        e.stopPropagation();</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    $(&quot;p&quot;).click(function () &#123;</span><br><span class="line">        alert(&quot;p&quot;);</span><br><span class="line">    &#125;);</span><br><span class="line">    $(&quot;div&quot;).click(function () &#123;</span><br><span class="line">        alert(&quot;div&quot;);</span><br><span class="line">    &#125;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>



<h3 id="7-9-页面载入"><a href="#7-9-页面载入" class="headerlink" title="7-9 页面载入"></a>7-9 页面载入</h3><p>当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。</p>
<p>两种写法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(document).ready(function()&#123;</span><br><span class="line">&#x2F;&#x2F; 在这里写你的JS代码...</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>简写：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(function()&#123;</span><br><span class="line">&#x2F;&#x2F; 你在这里写你的代码</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>文档加载完绑定事件，并且阻止默认事件发生：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;zh-CN&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">  &lt;meta http-equiv&#x3D;&quot;x-ua-compatible&quot; content&#x3D;&quot;IE&#x3D;edge&quot;&gt;</span><br><span class="line">  &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1&quot;&gt;</span><br><span class="line">  &lt;title&gt;登录注册示例&lt;&#x2F;title&gt;</span><br><span class="line">  &lt;style&gt;</span><br><span class="line">    .error &#123;</span><br><span class="line">      color: red;</span><br><span class="line">    &#125;</span><br><span class="line">  &lt;&#x2F;style&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line"></span><br><span class="line">&lt;form id&#x3D;&quot;myForm&quot;&gt;</span><br><span class="line">  &lt;label for&#x3D;&quot;name&quot;&gt;姓名&lt;&#x2F;label&gt;</span><br><span class="line">  &lt;input type&#x3D;&quot;text&quot; id&#x3D;&quot;name&quot;&gt;</span><br><span class="line">  &lt;span class&#x3D;&quot;error&quot;&gt;&lt;&#x2F;span&gt;</span><br><span class="line">  &lt;label for&#x3D;&quot;passwd&quot;&gt;密码&lt;&#x2F;label&gt;</span><br><span class="line">  &lt;input type&#x3D;&quot;password&quot; id&#x3D;&quot;passwd&quot;&gt;</span><br><span class="line">  &lt;span class&#x3D;&quot;error&quot;&gt;&lt;&#x2F;span&gt;</span><br><span class="line">  &lt;input type&#x3D;&quot;submit&quot; id&#x3D;&quot;modal-submit&quot; value&#x3D;&quot;登录&quot;&gt;</span><br><span class="line">&lt;&#x2F;form&gt;</span><br><span class="line"></span><br><span class="line">&lt;script src&#x3D;&quot;jquery-3.2.1.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script src&#x3D;&quot;s7validate.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  function myValidation() &#123;</span><br><span class="line">    &#x2F;&#x2F; 多次用到的jQuery对象存储到一个变量，避免重复查询文档树</span><br><span class="line">    var $myForm &#x3D; $(&quot;#myForm&quot;);</span><br><span class="line">    $myForm.find(&quot;:submit&quot;).on(&quot;click&quot;, function () &#123;</span><br><span class="line">      &#x2F;&#x2F; 定义一个标志位，记录表单填写是否正常</span><br><span class="line">      var flag &#x3D; true;</span><br><span class="line">      $myForm.find(&quot;:text, :password&quot;).each(function () &#123;</span><br><span class="line">        var val &#x3D; $(this).val();</span><br><span class="line">        if (val.length &lt;&#x3D; 0 )&#123;</span><br><span class="line">          var labelName &#x3D; $(this).prev(&quot;label&quot;).text();</span><br><span class="line">          $(this).next(&quot;span&quot;).text(labelName + &quot;不能为空&quot;);</span><br><span class="line">          flag &#x3D; false;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">      &#x2F;&#x2F; 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件</span><br><span class="line">      return flag;</span><br><span class="line">    &#125;);</span><br><span class="line">    &#x2F;&#x2F; input输入框获取焦点后移除之前的错误提示信息</span><br><span class="line">    $myForm.find(&quot;input[type!&#x3D;&#39;submit&#39;]&quot;).on(&quot;focus&quot;, function () &#123;</span><br><span class="line">      $(this).next(&quot;.error&quot;).text(&quot;&quot;);</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F; 文档树就绪后执行</span><br><span class="line">  $(document).ready(function () &#123;</span><br><span class="line">    myValidation();</span><br><span class="line">  &#125;);</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>



<h3 id="7-10-与window-onload的区别"><a href="#7-10-与window-onload的区别" class="headerlink" title="7-10 与window.onload的区别"></a>7-10 与window.onload的区别</h3><ul>
<li>window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用</li>
<li>jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）</li>
</ul>
<h3 id="7-11-事件委托"><a href="#7-11-事件委托" class="headerlink" title="7-11 事件委托"></a>7-11 事件委托</h3><p>事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。</p>
<p>示例：</p>
<p>表格中每一行的编辑和删除按钮都能触发相应的事件。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;table&quot;).on(&quot;click&quot;, &quot;.delete&quot;, function () &#123;</span><br><span class="line">  &#x2F;&#x2F; 删除按钮绑定的事件</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">"en"</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=<span class="string">"UTF-8"</span>&gt;</span><br><span class="line">    &lt;title&gt;Title&lt;<span class="regexp">/title&gt;</span></span><br><span class="line"><span class="regexp">    &lt;script src="https:/</span><span class="regexp">/cdn.bootcss.com/</span>jquery/<span class="number">3.3</span><span class="number">.1</span>/jquery.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/head&gt;</span></span><br><span class="line"><span class="string">&lt;body&gt;</span></span><br><span class="line"><span class="string">&lt;button&gt;是兄弟，就来砍我!!!&lt;/button&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;script&gt;</span></span><br><span class="line"><span class="string">    // 给页面上所有的button标签绑定点击事件</span></span><br><span class="line"><span class="string">    $('button').click(function () &#123;  // 无法影响到动态创建的标签</span></span><br><span class="line"><span class="string">        alert(123)</span></span><br><span class="line"><span class="string">    &#125;)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    //$('body').append('&lt;button&gt;是兄弟，就来砍我!!!&lt;/button&gt;')</span></span><br><span class="line"><span class="string">    // 事件委托</span></span><br><span class="line"><span class="string">    // $('body').on('click','button',function () &#123;</span></span><br><span class="line"><span class="string">    //     alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的</span></span><br><span class="line"><span class="string">    // &#125;)</span></span><br><span class="line"><span class="string">&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="each"><a href="#each" class="headerlink" title="each"></a>each</h2><p><strong>jQuery.each(collection, callback(indexInArray, valueOfElement))：</strong></p>
<p>描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">li &#x3D;[10,20,30,40]</span><br><span class="line">$.each(li,function(i, v)&#123;</span><br><span class="line">  console.log(i, v);&#x2F;&#x2F;index是索引，ele是每次循环的具体元素。</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>输出：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">010</span><br><span class="line">120</span><br><span class="line">230</span><br><span class="line">340</span><br></pre></td></tr></table></figure>

<p><strong>.each(function(index, Element))：</strong></p>
<p>描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。</p>
<p><code>.each()</code> 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 <code>this</code> 总是指向这个元素。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 为每一个li标签添加foo</span><br><span class="line">$(&quot;li&quot;).each(function()&#123;</span><br><span class="line">  $(this).addClass(&quot;c1&quot;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式<em>迭代</em>的过程。当这种情况发生时，它通常不需要显式地循环的 <code>.each()</code>方法：</p>
<p>也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;li&quot;).addClass(&quot;c1&quot;);  &#x2F;&#x2F; 对所有标签做统一操作</span><br></pre></td></tr></table></figure>

<p><strong>注意：</strong></p>
<p>在遍历过程中可以使用 <code>return false</code>提前结束each循环。</p>
<p><strong>终止each循环</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">return false；</span><br></pre></td></tr></table></figure></section>
    <!-- Tags START -->
    
    <!-- Tags END -->
    <!-- NAV START -->
    
  <div class="nav-container">
    <!-- reverse left and right to put prev and next in a more logic postition -->
    
      <a class="nav-left" href="/python/%E5%89%8D%E7%AB%AF/13-JS%E7%9A%84DOM%E6%93%8D%E4%BD%9C/">
        <span class="nav-arrow">← </span>
        
          python/前端/13-JS的DOM操作
        
      </a>
    
    
      <a class="nav-right" href="/python/%E5%89%8D%E7%AB%AF/7-%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80/">
        
          python/前端/7-响应式布局
        
        <span class="nav-arrow"> →</span>
      </a>
    
  </div>

    <!-- NAV END -->
    <!-- 打赏 START -->
    
      <div class="money-like">
        <div class="reward-btn">
          赏
          <span class="money-code">
            <span class="alipay-code">
              <div class="code-image"></div>
              <b>使用支付宝打赏</b>
            </span>
            <span class="wechat-code">
              <div class="code-image"></div>
              <b>使用微信打赏</b>
            </span>
          </span>
        </div>
        <p class="notice">点击上方按钮,请我喝杯咖啡！</p>
      </div>
    
    <!-- 打赏 END -->
    <!-- 二维码 START -->
    
      <div class="qrcode">
        <canvas id="share-qrcode"></canvas>
        <p class="notice">扫描二维码，分享此文章</p>
      </div>
    
    <!-- 二维码 END -->
    
      <!-- Gitment START -->
      <div id="comments"></div>
      <!-- Gitment END -->
    
  </article>
  <!-- Article END -->
  <!-- Catalog START -->
  
    <aside class="catalog-container">
  <div class="toc-main">
  <!-- 不蒜子统计 -->
    <strong class="toc-title">目录</strong>
    
      <ol class="toc-nav"><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#1-基本效果"><span class="toc-nav-text">1. 基本效果</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#2-滑动效果"><span class="toc-nav-text">2. 滑动效果</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#3-淡入淡出效果"><span class="toc-nav-text">3 淡入淡出效果</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#4-自定义动画"><span class="toc-nav-text">4 自定义动画</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#5-动画控制"><span class="toc-nav-text">5 动画控制</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#6-设置"><span class="toc-nav-text">6 设置</span></a></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#7-事件"><span class="toc-nav-text">7 事件</span></a><ol class="toc-nav-child"><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#7-1-常用事件"><span class="toc-nav-text">7-1 常用事件</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#7-2-事件绑定"><span class="toc-nav-text">7-2 事件绑定</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#7-3-移除事件"><span class="toc-nav-text">7-3 移除事件</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#7-4-阻止后续事件执行"><span class="toc-nav-text">7-4 阻止后续事件执行</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#7-8-阻止事件冒泡"><span class="toc-nav-text">7-8 阻止事件冒泡</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#7-9-页面载入"><span class="toc-nav-text">7-9 页面载入</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#7-10-与window-onload的区别"><span class="toc-nav-text">7-10 与window.onload的区别</span></a></li><li class="toc-nav-item toc-nav-level-3"><a class="toc-nav-link" href="#7-11-事件委托"><span class="toc-nav-text">7-11 事件委托</span></a></li></ol></li><li class="toc-nav-item toc-nav-level-2"><a class="toc-nav-link" href="#each"><span class="toc-nav-text">each</span></a></li></ol>
    
  </div>
</aside>
  
  <!-- Catalog END -->
</main>

<script>
  (function () {
    var url = 'http://www.liuqingzheng.top/python/前端/18-JQuery动画效果/';
    var banner = ''
    if (banner !== '' && banner !== 'undefined' && banner !== 'null') {
      $('#article-banner').css({
        'background-image': 'url(' + banner + ')'
      })
    } else {
      $('#article-banner').geopattern(url)
    }
    $('.header').removeClass('fixed-header')

    // error image
    $(".markdown-content img").on('error', function() {
      $(this).attr('src', 'http://file.muyutech.com/error-img.png')
      $(this).css({
        'cursor': 'default'
      })
    })

    // zoom image
    $(".markdown-content img").on('click', function() {
      var src = $(this).attr('src')
      if (src !== 'http://file.muyutech.com/error-img.png') {
        var imageW = $(this).width()
        var imageH = $(this).height()

        var zoom = ($(window).width() * 0.95 / imageW).toFixed(2)
        zoom = zoom < 1 ? 1 : zoom
        zoom = zoom > 2 ? 2 : zoom
        var transY = (($(window).height() - imageH) / 2).toFixed(2)

        $('body').append('<div class="image-view-wrap"><div class="image-view-inner"><img src="'+ src +'" /></div></div>')
        $('.image-view-wrap').addClass('wrap-active')
        $('.image-view-wrap img').css({
          'width': `${imageW}`,
          'transform': `translate3d(0, ${transY}px, 0) scale3d(${zoom}, ${zoom}, 1)`
        })
        $('html').css('overflow', 'hidden')

        $('.image-view-wrap').on('click', function() {
          $(this).remove()
          $('html').attr('style', '')
        })
      }
    })
  })();
</script>


  <script>
    var qr = new QRious({
      element: document.getElementById('share-qrcode'),
      value: document.location.href
    });
  </script>



  <script>
    var gitmentConfig = "liuqingzheng";
    if (gitmentConfig !== 'undefined') {
      var gitment = new Gitment({
        id: "python/前端/18-JQuery动画效果",
        owner: "liuqingzheng",
        repo: "FuckBlog",
        oauth: {
          client_id: "32a4076431cf39d0ecea",
          client_secret: "94484bd79b3346a949acb2fda3c8a76ce16990c6"
        },
        theme: {
          render(state, instance) {
            const container = document.createElement('div')
            container.lang = "en-US"
            container.className = 'gitment-container gitment-root-container'
            container.appendChild(instance.renderHeader(state, instance))
            container.appendChild(instance.renderEditor(state, instance))
            container.appendChild(instance.renderComments(state, instance))
            container.appendChild(instance.renderFooter(state, instance))
            return container;
          }
        }
      })
      gitment.render(document.getElementById('comments'))
    }
  </script>




    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
<!-- 不蒜子统计 -->
<span id="busuanzi_container_site_pv">
     本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv" style='display:none'>
     本站访客数<span id="busuanzi_value_site_uv"></span>人
</span>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



  <p class="copyright">
    &copy; 2021 | Proudly powered by <a href="https://www.cnblogs.com/xiaoyuanqujing" target="_blank">小猿取经</a>
    <br>
    Theme by <a href="https://www.cnblogs.com/xiaoyuanqujing" target="_blank" rel="noopener">小猿取经</a>
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>





<!-- Baidu Tongji -->

<script>
    var _baId = 'c5fd96eee1193585be191f318c3fa725';
    // Originial
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?" + _baId;
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
</script>


<script src="/js/script.js"></script>


<script src="/js/search.js"></script>


<script src="/js/load.js"></script>



  <span class="local-search local-search-google local-search-plugin" style="right: 50px;top: 70px;;position:absolute;z-index:2;">
      <input type="search" placeholder="站内搜索" id="local-search-input" class="local-search-input-cls" style="">
      <div id="local-search-result" class="local-search-result-cls"></div>
  </span>


  </body>
</html>